<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="initial-scale=1, width=device-width" />
  <meta http-equiv="Content-Security-Policy"
    content="default-src 'self'; connect-src blob: *; script-src 'self' 'unsafe-eval' 'unsafe-inline' *; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' *; font-src 'self' data: *; img-src 'self' data: file: * blob:; media-src 'self' data: blob: file:; frame-src * file:" />
  <style>
    :root {
      --splash-bg: #FFFFFF;
      --splash-fg: #333333;
      --splash-accent: #8E47F0;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --splash-bg: #121212;
        --splash-fg: #E6E6E6;
        --splash-accent: #8E47F0;
      }
    }

    html.theme-light {
      --splash-bg: #FFFFFF;
      --splash-fg: #333333;
      --splash-accent: #8E47F0;
    }

    html.theme-dark {
      --splash-bg: #121212;
      --splash-fg: #E6E6E6;
      --splash-accent: #8E47F0;
    }

    #app-splash {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      background: var(--splash-bg) !important;
      color: var(--splash-fg) !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      z-index: 9999 !important;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;
      transform: translateY(0) !important;
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
      overflow: hidden !important;
    }

    #app-splash.curtain-up {
      transform: translateY(-100vh) !important;
      pointer-events: none !important;
    }

    #app-splash .splash-content {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      transition: opacity 0.3s ease-out !important;
    }

    #app-splash.curtain-up .splash-content {
      opacity: 0 !important;
    }

    .splash-logo {
      width: 100px !important;
      height: 100px !important;
      margin-bottom: 16px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .splash-text {
      font-size: 40px !important;
      color: var(--splash-fg) !important;
      margin: 0 !important;
      padding: 0 !important;
      font-weight: bold !important;
      line-height: 1 !important;
    }

    .splash-emergency {
      position: absolute !important;
      bottom: 20px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      font-size: 11px !important;
      color: var(--splash-accent) !important;
      text-align: center !important;
      cursor: pointer !important;
      padding: 8px 12px !important;
      border: 1px solid var(--splash-accent) !important;
      border-radius: 4px !important;
      background: transparent !important;
      transition: all 0.3s ease !important;
      opacity: 0 !important;
      visibility: hidden !important;
    }

    .splash-emergency.show {
      opacity: 1 !important;
      visibility: visible !important;
    }

    .splash-emergency:hover {
      background: var(--splash-accent) !important;
      color: var(--splash-bg) !important;
    }

    app {
      opacity: 0 !important;
      transform: translateY(20px) !important;
      transition: all 0.4s ease-out !important;
    }

    app.ready {
      opacity: 1 !important;
      transform: translateY(0) !important;
    }
  </style>

  <script>
    (async () => {
      try {
        // Only try to get theme if service is available
        if (window.service?.configService?.getAppTheme) {
          const theme = await window.service.configService.getAppTheme();
          applyTheme(theme);
        } else {
          // Fallback to system theme detection
          applyTheme('system');
        }
      } catch (error) {
        console.warn('Failed to get app theme, using system default:', error);
        applyTheme('system');
      }
    })();

    function applyTheme(theme) {
      document.documentElement.classList.remove('theme-light', 'theme-dark', 'theme-system');
      document.documentElement.classList.add(`theme-${theme}`);
      if (theme === 'system') {
        const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        if (isDark) {
          document.documentElement.classList.add('dark');
        } else {
          document.documentElement.classList.remove('dark');
        }
      } else if (theme === 'dark') {
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.classList.remove('dark');
      }
    }

    // Emergency log directory access functionality
    let emergencyButtonTimer = null;
    const DELAY_TIME = 5000; // 5 seconds delay before showing button

    async function handleOpenLogDirectory() {
      try {
        // First try direct API (available immediately)
        if (window.api?.shell?.openLogDirectory) {
          console.log('Using direct shell API...');
          const result = await window.api.shell.openLogDirectory();
          if (result.success) {
            console.log('Log directory opened successfully via direct API');
            return;
          } else {
            console.error('Direct API failed:', result.error);
            // Fall through to service API
          }
        }
        
        // Fallback to service API if direct API failed or unavailable
        if (window.service?.filePreviewService?.openLogDirectory) {
          console.log('Falling back to service API...');
          const result = await window.service.filePreviewService.openLogDirectory();
          if (result.success) {
            console.log('Log directory opened successfully via service API');
            return;
          } else {
            console.error('Service API failed:', result.error);
          }
        }
        
        // If both APIs failed or unavailable
        console.error('All APIs failed or unavailable');
        alert('Unable to open log directory. Please check the logs manually.');
        
      } catch (error) {
        console.error('Error opening log directory:', error);
        alert('Service not ready yet. Please wait for the application to fully load.');
      }
    }

    function showEmergencyButton() {
      const button = document.querySelector('.splash-emergency');
      if (button) {
        button.classList.add('show');
      }
    }

    // Start timer when page loads
    document.addEventListener('DOMContentLoaded', () => {
      // Start delay timer for emergency button
      emergencyButtonTimer = setTimeout(() => {
        showEmergencyButton();
      }, DELAY_TIME);
      
      // Update button text with current language
      updateButtonText();
    });

    async function updateButtonText() {
      try {
        // Get language settings if available
        let lang = 'en'; // Default fallback
        
        if (window.service?.configService?.getAppLanguage) {
          try {
            lang = await window.service.configService.getAppLanguage();
          } catch (error) {
            console.warn('Failed to get language setting, using English:', error);
          }
        }
        
        const buttonTexts = {
          en: 'Open Log Directory',
          zh: '打开日志目录',
          ja: 'ログディレクトリを開く'
        };
        
        const currentText = buttonTexts[lang] || buttonTexts.en;
        
        const buttonElement = document.querySelector('.splash-emergency');
        if (buttonElement) {
          buttonElement.textContent = currentText;
        }
      } catch (error) {
        // Final fallback to English if everything fails
        console.warn('Using fallback language settings:', error);
        const buttonElement = document.querySelector('.splash-emergency');
        if (buttonElement) {
          buttonElement.textContent = 'Open Log Directory';
        }
      }
    }

    // Clear timer if app loads successfully
    window.addEventListener('appLoaded', () => {
      if (emergencyButtonTimer) {
        clearTimeout(emergencyButtonTimer);
        emergencyButtonTimer = null;
      }
    });
  </script>
</head>

<body>
  <!-- 启动画面 -->
  <div id="app-splash">
    <div class="splash-content">
      <img src="./assets/icons/302-logo.svg" alt="302 AI Studio" class="splash-logo" />
      <p class="splash-text">
        302<span style="color: #8E47F0;">.</span>AI Studio
      </p>
    </div>
    <div class="splash-emergency" onclick="handleOpenLogDirectory()">Open Log Directory</div>
  </div>

  <!-- 主应用 -->
  <app></app>
  <script type="module" src="main.tsx"></script>
</body>

</html>